<template>
<div class="FormCustomEditMobile">
    <div  class="mobile-form-center-list">
        <div class="mobile-form-center-list-le">
            <div>
                <div  class="mobile-title">{{i18n('mobile.hiddenComp','隐藏组件')}}</div>
                <my-icon type="iconicon-test1" class="mobile-title-icon"></my-icon>
                <p class="mobile-emptyHint">{{i18n('mobile.hiddenCompDesc','点击右侧预览区组件上的隐藏按钮，隐藏的组件在移动端不显示')}}</p>
            </div>
            <ul>
                <li v-if="!item.mobileShow" v-for="item in jsonMobile" class="mobile-form-center-list-le-li"><my-icon type="iconkejian"></my-icon><div class="mobile-form-center-list-le-common">{{item.config.name}}</div><my-icon @click="item.mobileShow = true" style="cursor: pointer" type="iconjia"></my-icon></li>
            </ul>
        </div>
        <div  class="mobileWrap">
            <div class="mobileBox">
                <div class="mobileContent">
                    <vuedraggable :group="{name: 'group',pull:'clone'}" v-model="jsonMobile">
                        <transition-group>
                            <div :key="index"  v-for="(item,index) in jsonMobile" class="cssTransforms">
                                <div class="cssTransforms-common" v-if="item.mobileShow" :style="{'height':item.mobileH+'px'}">
                                                        <span class="mobile-ePIGgz">
                                                            <my-icon @click="item.mobileShow = false" type="iconicon-test1"></my-icon>
                                                            <my-icon @click="up(index)" type="iconshang"></my-icon>
                                                            <my-icon @click="down(index)" type="iconxia"></my-icon>
                                                            <my-icon  @click="toTop(index)" type="iconzhiding"></my-icon>
                                                            <my-icon @click="toBottom(index)" type="iconzhidi"></my-icon>
                                                        </span>
                                    <div style="height: 100%;background-color: white">
                                        <FormCustomEditControl :item="item" :isMobile="true" :readonly="false" :isDesign="true" :editImgList="editImgList"></FormCustomEditControl>
                                    </div>
                                    <div
                                        :class="[move==true?'react-resizable-handle':'react-resizable-handle-hover']"
                                        @mousedown.stop.prevent="mousedown"
                                        @mousemove.stop.prevent="mousemove(index,$event)"
                                        @mouseup="mouseup"
                                        @mouseleave="mouseleave"
                                    ><my-icon type="iconmodal-drag"></my-icon></div>
                                </div>
                            </div>
                        </transition-group>
                    </vuedraggable>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import FormCustomEditControl from './FormCustomEditControl';
import vuedraggable from 'vuedraggable'
export default {
    name: "FormCustomEditMobile",
    props:['json',"editImgList"],
    data(){
        return{
            startY: 0, //开始移动坐标
            moveY: 0, //移动坐标
            move: false, //是否正在拖拽移动
            jsonMobile:'',
        }
    },
    components: {
        FormCustomEditControl,
        vuedraggable
    },
    created(){
      this.jsonMobile = JSON.parse(JSON.stringify(this.json))
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        toTop(index) {
            this.jsonMobile.unshift(this.jsonMobile[index]);
            this.jsonMobile.splice(index + 1, 1);
        },
        toBottom(index) {
            this.jsonMobile.push(this.jsonMobile[index]);
            this.jsonMobile.splice(index, 1);
        },
        down(index) {
            this.switchItem(index);
        },
        up(index) {
            this.switchItem(index - 1);
        },
        switchItem(index) {
            let arr = this.jsonMobile.splice(index, 2);
            this.jsonMobile.splice(index, 0, ...arr.reverse());
        },
        mousedown(e){
            this.startY = e.pageY;
            this.move = true;
        },
        //mobile放大
        mousemove(index,e){
            if (this.move) {
                this.moveY = e.pageY - this.startY;
                this.jsonMobile[index].mobileH = this.jsonMobile[index].mobileH + this.moveY;
                this.$forceUpdate()
                this.startY = e.pageY;
            }
        },
        mouseup(){
            this.move = false;
            this.moveY = 0;
        },
        mouseleave(){
            if(!this.move){
                return ;
            }
            this.mouseup();
        },
    },
    watch:{
        jsonMobile:{
            handler(){
                this.$emit('jsonChad',this.jsonMobile)
            }
        }
    }
}
</script>

<style scoped>

.bodyDivClass {
    flex: 1;
    position: relative;
    bottom: -2px;
    height: 100%;
    background-color: #fff;
    cursor: default;
}
.FormCustomEditMobile{
    width: 100%;
    height: 100%;
}
.mobile-form-center-list{
    display: flex;
    height: 100%
}
.mobile-form-center-list-le-common{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 5px;
}
.mobile-form-center-list-le-li:hover {
    background-color: rgb(240, 240, 240);
}
.mobile-form-center-list-le-li{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    line-height: 36px;
    height: 36px;
    padding: 0px 10px;
    background-color: rgb(245, 245, 245);
    transition: background-color 0.25s ease 0s;
    border-radius: 3px;
    margin-top: 8px;
    cursor: pointer;
}
.mobile-emptyHint{
    color: rgb(158, 158, 158);
    font-size: 12px;
    text-align: center;
}
.mobile-title{
    color: #757575;
    font-weight: 700
}
.mobile-title-icon{
    font-family: MD_Icon!important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    font-size: 32px;
    margin: auto;
    display: block;
}
.mobile-form-center-list-le{
    box-sizing: border-box;
    width: 240px;
    background-color: rgb(255, 255, 255);
    padding: 16px;
}
.cssTransforms-common{
    height: 100%;
    background-color: white;
    margin-bottom: 5px;
    position: relative;
}
.cssTransforms-common:hover>.mobile-ePIGgz{
    display: block;
}
.mobile-ePIGgz{
    position: fixed;
    z-index: 99999999;
    width: 180px;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    -webkit-box-align: center;
    align-items: center;
    padding: 6px 0px;
    background-color: rgb(255, 255, 255);
    border-radius: 0px 0px 6px 6px;
    box-shadow: rgb(0 0 0 / 24%) 0px 2px 4px
}
.mobile-ePIGgz i{
    font-size: 20px;
    line-height: 20px;
    padding: 0px 8px;
    cursor: pointer;
    font-weight: 600;
    color: rgb(117, 117, 117);
}
.mobile-ePIGgz i:hover {
    color: rgb(33, 150, 243);
}
.cssTransforms{
    transform: translate(10px, 10px);
    width: 328px;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    overflow:hidden;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px;
}
.react-resizable-handle{
    bottom: -272px;
    padding: 291px;
    cursor: se-resize;
    height: 300px;
    position: absolute;
    right: -272px;
    z-index: 9999999999999;
    width: 300px;
}
.react-resizable-handle-hover{
    bottom: 0px;
    padding: 0px;
    cursor: se-resize;
    height: 20px;
    position: absolute;
    right: 0px;
    z-index: 9999999999999;
    width: 20px;
}
.mobileWrap{
    box-sizing: border-box;
    width: 380px;
    height: calc(100% - 40px);
    margin: 20px auto;
    padding: 15px;
    border-radius: 30px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 16%) 0px 2px 6px;
}
.mobileBox{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(221, 221, 221);
}
.mobileContent{
    height: calc(100% - 10px);
    margin-top: 5px;
    overflow: auto;
}
</style>